<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <title>edit_address</title>
  <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
  <style type="text/css">
    /* 样式表 */
    body {
      font-family: Arial, sans-serif;
      font-size: 14px;
      line-height: 1.5;
      color: #333;
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    li {
      display: block;
      margin-bottom: 10px;
    }

    label {
      display: inline-block;
      width: 120px;
      text-align: right;
      margin-right: 10px;
    }

    select {
      padding: 6px 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      outline: none;
      box-shadow: none;
      font-size: inherit;
      width: 200px;
    }

    input[type="text"] {
      padding: 6px 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      outline: none;
      box-shadow: none;
      font-size: inherit;
      width: 500px;
    }

    input[type="tel"] {
      padding: 6px 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      outline: none;
      box-shadow: none;
      font-size: inherit;
      width: 200px;
    }

    input[type="checkbox"] {
      margin-left: 130px;
    }

    button[type="submit"] {
      padding: 8px 16px;
      background-color: #f60;
      color: #fff;
      border: none;
      border-radius: 4px;
      outline: none;
      box-shadow: none;
    }

    button[type="submit"]:hover {
      cursor: pointer;
      background-color: #f90;
    }


    body {
      /*列表框样式*/
      font-family: Arial, Helvetica, sans-serif;
      background-color: #f2f2f2;
    }

    table {
      border-collapse: collapse;
      width: 100%;
      margin: 10px 0px;
      background-color: white;
      box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
    }

    th,
    td {
      text-align: left;
      padding: 8px;
    }

    th {
      background-color: #4caf50;
      color: white;
    }

    tr:nth-child(even) {
      background-color: #f2f2f2;
    }

    tr:hover {
      background-color: #ddd;
    }

    a {
      padding: 8px;
      background-color: #4caf50;
      color: white;
      text-decoration: none;
      border-radius: 2px;
      margin: 5px;
    }

    a:hover {
      background-color: #367431;
    }

  </style>
</head>
<body>
<h1>收货地址</h1>

<ul>
  <!-- 收货地址 -->
  <li>
    <label>地址信息：</label>
    <select id="province" name="province">
      <option value="">请选择省份</option>
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广东">广东</option>
    </select>
    <select id="city" name="city" disabled>
      <option value="">请选择城市</option>
    </select>
    <select id="street" name="street" disabled>
      <option value="">请选择县区</option>
    </select>
  </li>

  <li>
    <label for="address-detail">地址信息：</label>
    <input type="text" id="address-detail" name="address-detail" placeholder="请填写详细地址">
  </li>

  <!-- 邮政编码 -->
  <li>
    <label for="zipcode">邮政编码：</label>
    <input type="text" id="zipcode" name="zipcode">
  </li>

  <!-- 收货人姓名 -->
  <li>
    <label for="name">收货人姓名：</label>
    <input type="text" id="name" name="name">
  </li>

  <!-- 手机号码 -->
  <li>
    <label for="phone">手机号码：</label>
    <input type="tel" id="phone" name="phone">
  </li>

  <!-- 是否设为默认收货地址 -->
  <li>
    <input type="checkbox" id="default-address" name="default-address" value="1">
    <label for="default-address">设为默认收货地址</label>
  </li>
</ul>

<button type="submit">保存</button>

<script type="text/javascript">
  // 获取表单元素

  var provinceEle = document.getElementById("province");
  var cityEle = document.getElementById("city");
  var streetEle = document.getElementById("street");
  var addressEle = document.getElementById("address-detail");
  var zipcodeEle = document.getElementById("zipcode");
  var nameEle = document.getElementById("name");
  var phoneEle = document.getElementById("phone");
  var defaultAddressEle = document.getElementById("default-address");

  // 省份下拉框改变事件处理程序
  var provinceChanged = function(){
    // 读取当前选中的省份
    var province = provinceEle.value;

    if (province == "") {
      // 如果没有选中任何省份，则将城市和县区下拉框都禁用
      cityEle.disabled = true;
      streetEle.disabled = true;
    } else {
      // 否则，生成相应的城市下拉框选项，并启用城市下拉框
      cityEle.innerHTML = "<option value=''>请选择城市</option>";

      switch (province) {
        case "北京":
          cityEle.innerHTML += "<option value='北京市'>北京市</option>";
          break;

        case "上海":
          cityEle.innerHTML += "<option value='上海市'>上海市</option>";
          break;

        case "广东":
          cityEle.innerHTML += "<option value='广州市'>广州市</option>";
          cityEle.innerHTML += "<option value='深圳市'>深圳市</option>";
          cityEle.innerHTML += "<option value='珠海市'>珠海市</option>";
          break;

        default:
          break;
      }

      cityEle.disabled = false;
    }
  }

  // 城市下拉框改变事件处理程序
  var cityChanged = function(){
    // 读取当前选中的城市
    var city = cityEle.value;

    if (city == "") {
      // 如果没有选中任何城市，则将县区下拉框禁用
      streetEle.disabled = true;
    } else {
      // 否则，生成相应的县区下拉框选项，并启用县区下拉框
      streetEle.innerHTML = "<option value=''>请选择县区</option>";

      switch (city) {
        case "北京市":
          streetEle.innerHTML += "<option value='东城区'>东城区</option>";
          streetEle.innerHTML += "<option value='西城区'>西城区</option>";
          streetEle.innerHTML += "<option value='朝阳区'>朝阳区</option>";
          streetEle.innerHTML += "<option value='海淀区'>海淀区</option>";
          break;

        case "上海市":
          streetEle.innerHTML += "<option value='黄浦区'>黄浦区</option>";
          streetEle.innerHTML += "<option value='徐汇区'>徐汇区</option>";
          streetEle.innerHTML += "<option value='长宁区'>长宁区</option>";
          streetEle.innerHTML += "<option value='静安区'>静安区</option>";
          break;

        case "广州市":
          streetEle.innerHTML += "<option value='天河区'>天河区</option>";
          streetEle.innerHTML += "<option value='海珠区'>海珠区</option>";
          streetEle.innerHTML += "<option value='荔湾区'>荔湾区</option>";
          break;

        case "深圳市":
          streetEle.innerHTML += "<option value='福田区'>福田区</option>";
          streetEle.innerHTML += "<option value='罗湖区'>罗湖区</option>";
          streetEle.innerHTML += "<option value='南山区'>南山区</option>";
          break;

        case "珠海市":
          streetEle.innerHTML += "<option value='香洲区'>香洲区</option>";
          streetEle.innerHTML += "<option value='斗门区'>斗门区</option>";
          streetEle.innerHTML += "<option value='金湾区'>金湾区</option>";
          break;

        default:
          break;
      }

      streetEle.disabled = false;
    }
  }

  // 绑定下拉框事件
  provinceEle.addEventListener("change", provinceChanged);
  cityEle.addEventListener("change", cityChanged);

  // 保存按钮单击事件处理程序
  var saveBtn = document.querySelector('button[type="submit"]');
  saveBtn.addEventListener("click", function(){
    // 获取表单数据并拼接成地址字符串

    var province = provinceEle.value.trim();
    var city = cityEle.value.trim();
    var street = streetEle.value.trim();
    var addressDetail = addressEle.value.trim();
    var zipcode = zipcodeEle.value.trim();
    var name = nameEle.value.trim();
    var phone = phoneEle.value.trim();
    var defaultAddress = defaultAddressEle.checked;

    var addressStr = province + city + street ;

    // 判断表单数据是否合法
    if (province == "" || city == "" || street == "" ) {
      alert("请填写完整的地址信息！");
      return false;
    }

    if (addressDetail=="" ) {
      alert("请填写完整的城市信息！");
      return false;
    }

    if (zipcode != "" && !/^\d{6}$/.test(zipcode)) {
      alert("邮政编码格式不正确！");
      return false;
    }

    if (name == "") {
      alert("请填写收货人姓名！");
      return false;
    }

    if (!/^1\d{10}$/.test(phone)) {
      alert("手机号码格式不正确！");
      return false;
    }
    // 执行保存操作，此处只输出表单数据
    console.log("收货人姓名 receive_man：" +name);
    console.log("地址信息 area：" + addressStr);
    console.log("详细地址信息 address_detail：" + addressDetail);
    console.log("邮政编码postman:" + zipcode);

    console.log("手机号码 telephone:" + phone);
    console.log("设为默认收货地址 default_address:" + defaultAddress);

    const urlParams = new URLSearchParams(window.location.search);
    const addressId = urlParams.get('address_id');

    // 使用 Ajax 发送数据到后台
    $.ajax({
      url: "edit_address",
      type: "post",
      data: {
        address_id: addressId, // 添加address_id字段
        receive_man: name,
        // province: province,
        // city: city,
        // street: street,
        area: addressStr,
        address_detail: addressDetail,
        postman: zipcode,
        telephone: phone,
        default_address: defaultAddress ? 1 : 0
      },
      success: function(result) {
        console.log("保存成功：");

        // 将当前页面地址替换为重定向地址
        window.location.replace("qry_address_page_list?start_page=1&page_size=10");
      },
      error: function() {
        console.log("请求错误");
      }
    });

    return true;
  });

  window.onload = function() {
    // 获取要设置默认值的地址信息输入框
    var addressInfoInput = document.querySelector("#address-info-input");
    const urlParams = new URLSearchParams(window.location.search);
    const addressId = urlParams.get('address_id');
    // 发送 AJAX 请求
    $.ajax({
      url: "show_edit_address1",
      type: "GET",
      data: { address_id: addressId }, // 根据实际情况修改地址 ID
      success: function(response) {
        // 响应成功后的处理逻辑
        var addressID = response.address_id; // 假设响应中包含了地址信息
        var receiveMan=response.receive_man;
        var postMan=response.postman;
        var telephone=response.telephone;
        var defaultAddress=response.default_address;
        // 将地址信息设置为输入框的默认值
        // addressInfoInput.value = addressInfo;
        // 将地址信息设置为输入框的默认值
        document.querySelector("#address-detail").value = addressID;
        document.querySelector("#name").value = receiveMan;
        document.querySelector("#zipcode").value = postMan;
        document.querySelector("#phone").value = telephone;
        if (defaultAddress == 1) {
          document.querySelector("#default-address").checked = true;
        }

        console.log("address：" + addressID + receiveMan + postMan + telephone + defaultAddress);
      },
      error: function(xhr, status, error) {
        // 响应失败后的处理逻辑
        console.log("请求出错：" + error);
      }
    });
  };



</script>
</body>
<body>

<table>
  <tr>
    <td>代码</td>
    <td>姓名</td>
    <td>移动电话</td>
    <td>专业</td>
    <td>操作</td>
  </tr>
  <tr th:each="a, State: ${address_list}">
    <td th:text="${a.address_id}"></td>
    <td th:text="${a.receive_man}"></td>
    <td th:text="${a.area}"></td>
    <td th:text="${a.address_detail}"></td>
    <td th:text="${a.postman}"></td>
    <td th:text="${a.telephone}"></td>

    <td>
      <a th:href="@{show_edit_address(address_id=${a.address_id})}">修改</a>
      <a th:href="@{delete_address(address_id=${a.address_id})}">删除</a>
      <a th:href="@{}">设为默认</a>
    </td>
  </tr>
</table>
<div style="display: flex; align-items: center;">
  <a style="margin-right: 10px;" th:href="@{add_user}">添加用户</a>
  <a style="margin-right: 10px;" th:href="@{qry_address_page_list(start_page=${start_page == null ? 1 : start_page-1}, page_size=${page_size})}">上一页</a>
  <a th:href="@{qry_address_page_list(start_page=${start_page == null ? 1 : start_page+1}, page_size=${page_size})}">下一页</a>
</div>


</body>
</html>